<template>
    <MainModule>
        <template #header>
            <MyRowForm :gutter="16">
                <MyColFormItem :span="6" :label="TableLabel.Id + ': '">
                    <el-input v-model.number="table.selectParams.Id" :placeholder="'请输入' + TableLabel.Id"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.Name + ': '">
                    <el-input v-model.trim="table.selectParams.Name" :placeholder="'请输入' + TableLabel.Name"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.Code + ': '">
                    <el-input v-model.trim="table.selectParams.Code" :placeholder="'请输入' + TableLabel.Code"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem>
                    <template #col>
                        <el-button type="primary" @click="Add">新增</el-button>
                        <el-button type="success" @click="Select">查询</el-button>
                        <el-button type="warning" @click="Reset">重置</el-button>
                    </template>
                </MyColFormItem>
            </MyRowForm>
        </template>

        <MyTable v-bind="MyTableConfig" :serial="(table.selectParams.Page - 1) * table.selectParams.PageSize + 1">
            <template #ManagerId="{ row }: { row: types.DataType }">
                {{ ParamsObj.ShopManager?.[row.ManagerId] ?? "暂无" }}
            </template>
            <template #operate="{ row }: { row: types.DataType }">
                <el-button type="primary" @click="Edit(row)">编辑</el-button>
                <el-button type="danger" @click="Delete(row)">删除</el-button>
                <el-button v-if="!ManagerIdList.includes(String(row.ManagerId))" type="success" style="margin: 5px 0;"
                    @click="BindManager(row, true)">
                    {{ OperateLabel.BindManager }}
                </el-button>
                <template v-else>
                    <el-button type="success" style="margin: 5px 0;" @click="BindManager(row, false)">
                        {{ OperateLabel.UpdateManager }}</el-button>
                    <el-button type="warning" style="margin-left:0;" @click="UnbindManager(row)">
                        {{ OperateLabel.UnbindManager }}</el-button>
                </template>
            </template>
        </MyTable>
        <EditDialog v-model:visible="EditDialogParams.visible" :edit-form="EditDialogParams.editForm"
            @submitSuccess="Select">
        </EditDialog>
        <BindManagerDialog v-model:visible="BindManagerDialogParams.visible"
            :editForm="BindManagerDialogParams.editForm" :isBindManager="BindManagerDialogParams.isBindManager"
            :ParamsObj="ParamsObj" @submitSuccess="Select">
        </BindManagerDialog>

        <template #footer>
            <MyPagination :total="table.total" v-model:page-size="table.selectParams.PageSize"
                v-model:current-page="table.selectParams.Page" @change="Select"></MyPagination>
        </template>
    </MainModule>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, shallowRef } from "vue";
import { MainModule, MyTable, MyPagination, MyRowForm, MyColFormItem } from "@/components"
import type { MyTableType } from "@/components"
import { ShopListApiUrl, ShopListApi } from "@/api/shop_manager/shop_list"
import { PaginationParams } from "@/library/common"
import * as types from "./types"
import { columns, TableLabel, OperateLabel } from "./ConfigData"
import EditDialog from "./EditDialog.vue"
import BindManagerDialog from "./BindManager.vue"
import MessageUti from "@/library/utils/MessageUti"
import { useMainLoading } from "@/hooks/useMainLoading"
import { AbortApi } from "@/library/utils/request"
import { ParamsObjFormat } from "@/library/utils/tools"

const { openMainLoading, closeMainLoading } = useMainLoading()

const initForm: types.SelectParamsType = { ...PaginationParams }
const table = reactive({
    selectParams: { ...initForm },
    total: 0,
})

const MyTableConfig = reactive<MyTableType>({
    loading: false,
    table: {
        data: []
    },
    columns
})

const Select = async () => {
    MyTableConfig.loading = true

    try {
        const { Data } = await ShopListApi.Select(table.selectParams)
        MyTableConfig.table.data = Data.Data
        table.total = Data.Count
    }
    catch (error) { }
    finally {
        MyTableConfig.loading = false
    }
}

const Reset = () => {
    table.selectParams = { ...initForm }
}

const ParamsObj = shallowRef<types.ParamsObjType>({})
const Params = async () => {
    const { Data } = await ShopListApi.Params()
    ParamsObj.value = ParamsObjFormat(Data)
}

const EditDialogParams = reactive<types.EditDialogType>({
    visible: false,
    editForm: {}
})
const Add = () => {
    EditDialogParams.visible = true
}

const Edit = (row: types.DataType) => {
    EditDialogParams.visible = true
    const { Id, Name, Code, Address, Enable, PhoneNumber } = row

    EditDialogParams.editForm = { Id, Name, Code, Address, Enable, PhoneNumber }
}

const Delete = async (row: types.DataType) => {
    const { Id } = row
    const confirm = await MessageUti.confirm("删除数据", "确定删除该数据？")
    if (!confirm) { return }

    try {
        await ShopListApi.Delete({ Id })
        Select()
        MessageUti.showSuccess("删除成功")
    }
    catch (error) { }
}

// 绑定/换绑 管理员
const ManagerIdList = computed(() => Object.keys(ParamsObj.value.ShopManager || {}))
const BindManagerDialogParams = reactive<types.BindManagerDialogType>({
    visible: false,
    isBindManager: false,
    editForm: {}
})
const BindManager = (row: types.DataType, isBindManager: boolean) => {
    const { ManagerId, Code: ShopCode } = row

    const _ManagerId = isBindManager ? undefined : ManagerId;
    BindManagerDialogParams.isBindManager = isBindManager;
    BindManagerDialogParams.visible = true

    BindManagerDialogParams.editForm = { ManagerId: _ManagerId, ShopCode }
}

// 解绑门店管理员
const UnbindManager = async (row: types.DataType) => {
    const confirm = await MessageUti.confirm(OperateLabel.UnbindManager, `确定要${OperateLabel.UnbindManager}嘛？`)
    if (!confirm) { return }

    try {
        await ShopListApi.UnbindManager({ ShopCode: row.Code })
        Select()
        MessageUti.showSuccess(OperateLabel.UnbindManager + "成功")
    }
    catch (error) { }
}

onMounted(async () => {
    openMainLoading()
    await Select()
    await Params()
    closeMainLoading()
})

onUnmounted(() => {
    AbortApi([ShopListApiUrl.Select, ShopListApiUrl.Params])
})

</script>

<style scoped></style>